<template>
  <div class="department_list">
    <!-- 头部搜索 -->
    <el-form :inline="true" :model="listFrom" class="demo-form-inline">
      <el-form-item label="科室名称">
        <el-input v-model="listFrom.name" placeholder="输入科室名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :icon="Search"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-popconfirm title="确定删除所选账号吗?" @confirm="onDelete()">
          <template #reference>
            <el-button type="info">删除选中</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <!--表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      stripe
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column property="id" label="科室编号" align="center" />
      <el-table-column
        property="createtime"
        label="科室创建时间"
        align="center"
      />
      <el-table-column property="name" label="科室名称" align="center" />
      <el-table-column property="maindoctor" label="科室主任" align="center" />
      <el-table-column label="科室操作" align="center">
        <template #default="scope">
          <el-popconfirm
            title="确定删除该账号吗?"
            @confirm="deleteAccount(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small" :icon="Delete" />
            </template>
          </el-popconfirm>
          <el-button
            type="primary"
            size="small"
            :icon="Edit"
            @click="editAccount(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="fenyeqi">
      <el-pagination
        v-model:current-page="listFrom.page"
        v-model:page-size="listFrom.size"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
    <!-- 详情页弹框 -->
    <el-dialog
      v-model="dialogVisible"
      title="床位管理"
      width="35%"
      align-center
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="科室名称">
          <el-input
            v-model="form.name"
            placeholder="请输入科室名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="科室主任">
          <el-input
            v-model="form.maindoctor"
            placeholder="请输入科室主任"
            clearable
          />
        </el-form-item>
        <el-form-item label="科室编号">
          <el-input v-model="form.id" placeholder="" disabled />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.time" placeholder="" disabled />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="determine">确定</el-button>
          <el-button type="info" @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from "vue";
import {
  departmentListReq,
  departmentSearchReq,
  departmentBatchdelReq,
  departmentDelReq,
  departmentEditReq,
} from "@/api/department.api";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import Dayjs from "dayjs";
import { fstat } from "fs";
const listFrom = reactive({
  name: "",
  page: 1,
  size: 10,
});
const form = reactive({
  name: "",
  maindoctor: "",
  id: null,
  time: null,
});
// 表格数据
const tableData = ref([]);
// 总数
const total = ref<number>(0);
//弹框开关
const dialogVisible = ref(false);
// 批量删除数据
const ids = ref<any>([]);
// 查询
const onSubmit = async () => {
  if (listFrom.name == "") {
    ElMessage.error("请输入科室名称！");
    return;
  }
  const res = await departmentSearchReq(listFrom);
  //   console.log(res, "9999");
  tableData.value = res.data.data;
  tableData.value = tableData.value.map((item) => ({
    ...item,
    createtime: Dayjs(item.createtime).format("YYYY-MM-DD"),
  }));
  total.value = res.data.total;
  if (tableData.value.length == 0) {
    ElMessage.error("没有该科室名称的数据！");
  }
};
// 批量删除选中
const onDelete = async () => {
  if (ids.value.length == 0) {
    ElMessage.error("请选择要删除的账号！");
    return;
  }
  ids.value = JSON.stringify(ids.value);
  const res = await departmentBatchdelReq({ ids: ids.value });
  //   console.log(res, "888");
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
  } else {
    ElMessage.error(res.data.msg);
  }
  getList();
};
// 单选框选中
const handleSelectionChange = (val) => {
  //   console.log(val);
  ids.value = JSON.parse(JSON.stringify(val)).map((item) => item.id);
};
// 单个删除
const deleteAccount = async (id) => {
  const res = await departmentDelReq({ id });
  console.log(res);
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
  } else {
    ElMessage.error(res.data.msg);
  }
  getList();
};
//编辑
const editAccount = (val) => {
  dialogVisible.value = true;
  form.name = val.name;
  form.maindoctor = val.maindoctor;
  form.id = val.id;
  form.time = val.createtime;
};
// 确定编辑
const determine = async () => {
  const res = await departmentEditReq(form);
  console.log(res);
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
    dialogVisible.value = false;
  } else {
    ElMessage.error(res.data.msg);
  }
  getList();
};
//获取列表
const getList = async () => {
  const res = await departmentListReq(listFrom);
  //   console.log(res, "222");
  tableData.value = res.data.data;
  tableData.value = tableData.value.map((item) => ({
    ...item,
    createtime: Dayjs(item.createtime).format("YYYY-MM-DD"),
  }));
  total.value = res.data.total;
};
watchEffect(getList);
</script>

<style scoped lang="scss">
.department_list {
  width: 100%;
  height: 100%;
  .fenyeqi {
    margin-top: 30px;
  }
}
</style>
